<template>
  <div class="device-list-history">
    <DynamicForm :rulesForm="state.rulesForm" :rules="state.rules" :refresh="state.refresh" @click="callBack"
                 type="search"/>
    <DynamicTable :columns="state.columns" :data="state.data" :table="state.table" @click="callBack"/>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, defineProps, reactive} from 'vue';
import moment from "moment";
import {ElMessage} from "element-plus";

import DynamicTable from '@/components/layout/table/dynamic-table.vue';
import DynamicForm from '@/components/layout/form/dynamic-form.vue';

import {historyColumns} from '@/assets/script/middle/columns/device';

import {listDeviceLogPageApi} from '@/api/lms';
import {historyForm, historyRules} from '@/assets/script/middle/forms/device/device-form';

const dynamicTableRef = ref(DynamicTable)
const dynamicFormRef = ref(DynamicForm)

const state = reactive({
  columns: JSON.parse(JSON.stringify(historyColumns)),
  data: [] as any,
  table: {
    pageIndex: 1,
    pageSize: 15,
    total: 0
  } as any,
  rulesForm: JSON.parse(JSON.stringify(historyForm)),
  rules: historyRules,
  searchData: {} as any,
  row: {} as any,
  refresh: 0 as any
})

const props = defineProps({
  row: {
    default: {}
  }
})

onMounted(() => {
  state.row = props.row
  const card = state.rulesForm[0].card
  const begin = card.find((_: any) => _.name === 'messageTimeBegin')
  if (begin) {
    begin['messageTimeBegin'] = moment().format('YYYY-MM-DDT00:00:00')
  }
  const end = card.find((_: any) => _.name === 'messageTimeEnd')
  if (end) {
    end['messageTimeEnd'] = moment().format('YYYY-MM-DDTHH:mm:ss')
  }
  state.refresh = Math.random()
  listDeviceLogPage()
})

const callBack = (data: any) => {
  console.log('callBack', data)
  switch (data.type || '') {
    case 'submit':
      state.searchData = JSON.parse(JSON.stringify(data.data))
      listDeviceLogPage(state.searchData)
      break
    case 'rest':
      state.searchData = {}
      state.table.pageIndex = 1
      state.table.pageSize = 15
      listDeviceLogPage()
      break
    case 'page':
      if (!state.searchData) {
        state.searchData = {}
      }
      state.searchData['pageIndex'] = data.data
      state.searchData['pageSize'] = state.table.pageSize
      state.table.pageIndex = data.data
      listDeviceLogPage(state.searchData)
      break
    case 'pageSize':
      if (!state.searchData) {
        state.searchData = {}
      }
      state.table.pageIndex = 1
      state.searchData['pageIndex'] = state.table.pageIndex
      state.searchData['pageSize'] = data.data
      state.table.pageSize = data.data
      listDeviceLogPage(state.searchData)
      break
  }
}

const listDeviceLogPage = (params = {} as any) => {
  if (!params['messageTimeBegin']) {
    params['messageTimeBegin'] = moment().format('YYYY-MM-DDT00:00:00')
  } else {
    params['messageTimeBegin'] = moment(params['messageTimeBegin']).format('YYYY-MM-DDTHH:mm:ss')
  }
  if (params['messageTimeEnd']) {
    params['messageTimeEnd'] = moment(params['messageTimeEnd']).format('YYYY-MM-DDTHH:mm:ss')
  } else {
    params['messageTimeEnd'] = moment().format('YYYY-MM-DDTHH:mm:ss')
  }

//获取当前时间
  let messageTimeBegin = moment(params['messageTimeBegin']);
//获取需要对比的时间
  let messageTimeEnd = moment(params['messageTimeEnd']);
//计算相差多少天 day可以是second minute
  const day = messageTimeEnd.diff(messageTimeBegin, 'day')
  if (day > 7) {
    ElMessage.warning({message: '查询时长不能超过7天！'})
    return false
  }

  if (!params['deviceCode']) {
    params['deviceCode'] = state.row.deviceCode
  }

  if (!params['pageIndex']) {
    params['pageIndex'] = state.table.pageIndex
  }
  if (!params['pageSize']) {
    params['pageSize'] = state.table.pageSize
  }
  listDeviceLogPageApi(params).then((data: any) => {
    if (data.code === 0) {
      state.data = data.data
      state.table.total = data.total
      state.table.pageSize = data.pageSize
      state.table.pageIndex = data.pageIndex
    }
  })
}
</script>